import createProps from '../../js/createProps.js'
import {CLOSE_CLASS, SHAKE_CLASS, TIME_MEDIUM, TIME_FAST} from '../../js/constants.js'
import {setCss} from "../../js/utils.js";

class Alert extends HTMLElement {
    constructor() {
        super()
        this.classList.add('u-alert')
        // Init properties
        this.variant = ''
        this.textClass = 't-sm-regular'
        this.labelClose = 'Close alert'
        this.iconPath = ''
        this.show = false
        this.timer = null
        // Events
        this.boundOnClose = this.onClose.bind(this)
    }

    connectedCallback() {
        createProps(this, true)
        if (this.message !== undefined) { this.slot = '' }
        this.hideAlert()
        this.render()
        this.setMaxHeight()
        this.bindEvent()
        this.showAlert()
        // Todo : add timer !
    }

    static get observedAttributes() {
        return ['message']
    }

    attributeChangedCallback(name) {
        if (name === 'message') {
            this.connectedCallback()
        }
    }

    render() {
        this.innerHTML = `
            <mark role="alert" aria-live="polite">
                <span class="${this.textClass}">${this.message ? this.message : this.slot}</span>
                ${this.renderButton()}
            </mark>
        `
        this.button = this.querySelector('button')
        this.span = this.querySelector('span')
    }

    renderButton() {
        if (this.labelClose === '') {
            return ''
        } else {
            return `<u-btn btn_type="button" aa_label="${this.labelClose}" icon_left="24/ui/close" ${this.iconPath !== '' ? 'icon_path="' + this.iconPath + '"' : ''}></u-btn>` 
        }
    }

    setMaxHeight() {
        const maxHeight = this.span.scrollHeight + 2
        setCss(this,'--max-height', maxHeight, true)
    }

    hideAlert() {
        if (this.show) {
            return
        }
        this.classList.add(CLOSE_CLASS)
    }

    showAlert() {
        const ValidationSummaryErrorsEmpty = this.querySelector('.validation-summary-errors li:empty')
        if ((this.message === undefined || this.message === '') && (this.slot === '' || ValidationSummaryErrorsEmpty)) {
            return
        }
        // Show First the alert
        setTimeout(() => {
            this.classList.remove(CLOSE_CLASS)
        }, 1)
        if (this.variant !== 'success') {
            this.shake()
        }
    }

    shake() {
        // Starts shake animation after alert is fully shown 
        setTimeout(() => {
            this.classList.add(SHAKE_CLASS)
        }, TIME_FAST)
        // Remove animation when ended
        setTimeout(() => {
            this.classList.remove(SHAKE_CLASS)
        }, TIME_FAST + TIME_MEDIUM)
    }

    onClose() {
        this.classList.add(CLOSE_CLASS)
    }

    bindEvent() {
        this.unbindEvent()
        this.button?.addEventListener('click', this.boundOnClose)
    }

    unbindEvent() {
        this.button?.removeEventListener('click', this.boundOnClose)
    }

    disconnectedCallback() {
        this.unbindEvent()
    }
}

customElements.get('u-alert') || customElements.define('u-alert', Alert)

export default Alert